<template>
  <div class="doodle-view" :style="{ width: 'auto' }" v-loading='isExtendImg'>

    <div class="doodle-view-content" :style="{ height: height + 'px' }">
      <div class="doodle-view-left">
        <div class="doodle-left-title">
          参数设定
        </div>
        <div class="doodle-left-size">
          画面尺寸
        </div>
        <div class="size-type">
          <div v-for="(item, index) in sizeType" :key="index" @click="choseSize(item, index)"
            :class="sizeTypeId == index ? 'active' : ''">
            {{ item.value }}
          </div>
        </div>
        <div class="doodle-slider ">
          <div class="slider-demo-block">
            <div>
              <text>宽度 {{ resPaddingLeft }}--{{ resPaddingRight }} -- {{ lastMoveDistanceLeft }}--{{
    lastMoveDistanceRight
  }}</text>
            </div>
            <div>
              <el-slider v-model="widthVal" :max=4000 size="small" @input="changImgWidth" />
              <el-input-number v-model="widthVal" controls-position="right" size="small" @input="changImgWidth" />
            </div>
          </div>
          <div class="slider-demo-block">
            <div>
              <text>高度{{ resPaddingTop }}-- {{ resPaddingBottom }} -- {{ lastMoveDistanceTop }} -- {{
    lastMoveDistanceBottom }}</text>
            </div>
            <text>{{ test }}</text>
            <div>
              <el-slider v-model="heightVal" :max=4000 size="small" @input="changImgHeight" />
              <el-input-number v-model="heightVal" controls-position="right" size="small" @input="changImgHeight" />
            </div>
          </div>
        </div>
      </div>
      <div class="doodle-view-center" @mouseleave="mouseleaveMethod" @mousemove="onResize('top', $event)"
        @mouseup="stopResize">
        <div class="tip_text">扩图最大不可超过4000X4000</div>
        <!-- 图片背景盒子 -->
        <div class="doodle-img-bg" ref="box" :style="{
    width: resWidth + 'px',
    height: resHeight + 'px',
    left: `calc(50% - ${resLeft}px)`,
    top: `calc(50% - ${resTop}px)`,
    paddingLeft: resPaddingLeft + 'px',
    paddingRight: resPaddingRight + 'px',
    paddingTop: resPaddingTop + 'px',
    paddingBottom: resPaddingBottom + 'px',
  }">
          <div class="top-frame" @mousedown="startResize('top', $event)">
          </div>
          <div class="bottom-frame" @mousedown="startResize('bottom', $event)"></div>
          <div class="left-frame" @mousedown="startResize('left', $event)">
          </div>
          <div class="right-frame" @mousedown="startResize('right', $event)"></div>
        </div>

        <img class="doodle-img" ref="img" :src="baseImage" :width="loading ? 0 : imgWidth + 'px'"
          :height="loading ? 0 : imgHeight + 'px'" @load="resetZoom" @click="choseImg"
          :class="isChoseImg ? 'imgActive' : ''" />
      </div>

      <div class="float-btn" v-if="showFloatBtn" @click="expandClick">
        <el-icon class="btn-icon loading" v-if="computeing">
          <Loading />
        </el-icon>
        <el-icon class="btn-icon" v-else>
          <Sort />
        </el-icon>
        <div>
          <div>AI扩图</div>
          <div class="min-font">消耗算力</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** 高清修复 */
/* eslint-disable */
import WebRequest from '@/unit/request.js'
export default {
  name: 'Repair',
  props: {
    // 图片url
    src: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: Number,
      default: 500
    },
    // 高度
    height: {
      type: Number,
      default: 300
    },
  },
  data() {
    return {
      test: 0,
      dragging: false,      // 是否绘制中
      isClear: false,       // 是否为擦除模式
      imgWidth: 500,        // 图像原始宽度，同时作用于画布
      imgHeight: 300,       // 图像原始高度，同时作用于画布
      resWidth: 0,        // 图片后面背景 计算后宽度
      resHeight: 0,        // 图片后面背景 计算后高度
      resLeft: 0,
      resTop: 0,
      resPaddingLeft: 0,
      resPaddingTop: 0,
      resPaddingBottom: 0,
      resPaddingRight: 0,
      sendTop: 0,            //发送拉伸顶部尺寸
      sendLeft: 0,          //发送拉伸左侧尺寸
      sendRight: 0,         //发送拉伸右侧尺寸
      sendBottom: 0,        //发送拉伸底部尺寸
      leftVal: 0, topVal: 0, rightVal: 0, bottomVal: 0,//计算的上下左右位置
      zoom: 1,              // 缩放比例
      loading: false,       // 图片是否加载中
      computeing: false,    // 计算中
      showFloatBtn: false,  // 展示浮动按钮（图片加载成功后展示）
      widthVal: 0,//宽
      heightVal: 0,//高
      widthProportion: 0,    //宽比例
      heightProportion: 0,    //高比例
      baseImage: '',
      imagesList: [],       // 图片列表，0为原图，1为高清还原后的图片
      imagesIndex: 0,       // 当前图片下标
      isRock: false,         // 自由变换为false， 选定尺寸为true
      sizeType: [{
        id: 0,
        value: '自由'
      }, {
        id: 1,
        value: '1:1'
      }, {
        id: 2,
        value: '9:16'
      }, {
        id: 3,
        value: '4:3'
      }, {
        id: 4,
        value: '3:4'
      }, {
        id: 5,
        value: '16:9'
      }],// 尺寸
      sizeTypeId: 0,//选中的尺寸id
      isChoseImg: false,//选中图片
      imgNaturalWidth: 0,//图片实际宽
      imgNaturalHeight: 0,//图片实际宽
      isResizing: false,//修改尺寸
      startX: 0,        //起始X坐标
      startWidth: 0,    //起始宽
      startHeight: 0,   //起始高
      boxHeight: 100,   //盒子高度
      changeImgType: null,//修改图片类型
      isExtendImg: false,//是否正在扩展图片
      tempRight: 0,
      tempLeft: 0,
      tempTop: 0,
      tempBottom: 0,
      selectedProportion: null,//选择的比例
      lastMoveDistanceLeft: 0,//上次向左移动距离
      lastMoveDistanceRight: 0,//上次向右移动距离
      lastMoveDistanceTop: 0,//上次向上移动距离
      lastMoveDistanceBottom: 0,//上次下左移动距离
      lastMoveDistanceWidth: 0,//上次宽度移动距离
      lastMoveDistanceHeight: 0,//上次高度移动距离
      maxExpandWidth: 0,     //左右可扩展最大的尺寸
      maxExpandHeight: 0,     //上下可扩展最大的尺寸
      scaleWidth: 0,         //缩放宽
      scaleHeight: 0,        //缩放高
    }
  },
  created() {
    setTimeout(() => {
      this.init()

    }, 500)
  },
  watch: {
    baseImage: function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$nextTick(() => {
          this.resetZoom();
        });
      }
    },
    src: {
      handler() {
        this.baseImage = this.src
        this.resetAll()
        // 更换图片后将扩展的尺寸归 0
        this.resHeight = 0
        this.resLeft = 0
        this.resPaddingBottom = 0
        this.resPaddingLeft = 0
        this.resPaddingRight = 0
        this.resPaddingTop = 0
        this.resWidth = 0
        this.resTop = 0
      },
      immediate: true
    },
  },
  methods: {
    // 设置最小宽高为图片宽高
    changImgHeight(e) {
      this.test = e
      let heightRes
      // 当图片实际高度大于选择的高度则让选择的高度为实际的高度
      if (this.imgNaturalHeight > this.heightVal) {
        this.resPaddingBottom = 0
        this.resPaddingTop = 0
        this.resTop = 0
        this.heightVal = this.imgNaturalHeight
        return
      }
      console.log(this.heightProportion, 'this.heightProportion', this.resPaddingBottom, this.resPaddingTop);
      // 高度变化值 = （这次变化高度 - 上次变化高度）  / 比例 / 两边
      heightRes = (e - this.lastMoveDistanceHeight) / this.heightProportion / 2
      // 如果没有上拉，则将减去的高度平均分配，如果值不够，多的额外减  如果往上挤的值大于往下的值，当往下的值降到0时，下不再减，上额外减
      if (heightRes > 0) {
        this.resPaddingBottom += heightRes
        this.resPaddingTop += heightRes
      } else {
        if (this.resPaddingTop - this.paddingBottom > 0) {
          console.log('上比下多');
          if (heightRes - this.paddingBottom < 0) {
            this.paddingBottom = 0
            this.resPaddingTop = heightRes - (heightRes - this.paddingBottom)
          }
        } else {
          console.log('下比上多');
          console.log(heightRes,this.resPaddingTop);
 
          // 如果下比上多，并且减去的比上扩展的还要多，上扩展为0，下减去应该减的和为上减剩下的
          if (heightRes - this.resPaddingTop < 0) {
            this.resPaddingBottom = heightRes + (heightRes - this.resPaddingTop)

            this.resPaddingTop = 0
          }
        }
      }


      if (e == this.imgNaturalHeight) {
        this.resPaddingBottom = 0
        this.resPaddingTop = 0
        this.resTop = 0
      }
      // 存储上次的移动高度
      this.lastMoveDistanceHeight = e
      this.resTop = (this.resPaddingTop - this.resPaddingBottom) / 2
      console.log(e, this.imgNaturalHeight, this.widthVal, this.heightVal, heightRes, this.resTop);
      console.log(this.resPaddingTop, this.resPaddingBottom, 'this.resPaddingTop - this.resPaddingBottom');

    },
    // 设置最小宽高为图片宽高  
    changImgWidth(e) {
      let heightRes, whidthRes
      // let 
      if (this.imgNaturalWidth > this.widthVal) {
        this.widthVal = this.imgNaturalWidth
      }
      whidthRes = (this.widthVal - this.lastMoveDistanceWidth) / this.widthProportion / 2
      this.resPaddingLeft = whidthRes
      this.resPaddingBottom = heightRes
      this.resPaddingRight = whidthRes
      this.resPaddingTop = heightRes
      console.log(e, this.imgNaturalWidth, this.widthVal);
    },
    // 这个先不扣算力，扣算力的梁哥下周统一去让他们出。
    // 点击扩展
    async expandClick() {
      // 盒子模拟4000*4000 图片实际占232*232 图片原本大小919*919 盒子最大为450
      // 计算比例 （4000-919）/ (450-232)
      const that = this
      // 比例=（假设宽高 - 图片实际宽高）/ (实际盒子宽高-图片宽高) * 拉伸距离
      let topBottom = (4000 - this.imgNaturalHeight) / 218
      let leftRight = (4000 - this.imgNaturalWidth) / 218
      let expandData = {
        "top": topBottom * this.resPaddingTop,
        "bottom": topBottom * this.resPaddingBottom,
        "left": leftRight * this.resPaddingRight,
        "right": leftRight * this.resPaddingRight,
        "img_url": this.baseImage
      }
      if (this.widthVal - this.imgNaturalWidth == 0 && this.heightVal - this.imgNaturalHeight == 0) {
        console.log('用户未拉动');
        this.$message({
          message: '请至少拉动1像素用以扩图',
          type: 'error'
        })
        return
      }
      this.$message({
        message: '即将为您生成',
        type: 'success'
      })
      this.isExtendImg = true
      let sendImgRes = await WebRequest.Fooocus.expand(expandData)
      const { task_id } = sendImgRes.data
      setTimeout(async () => {
        console.log(task_id, 'task_id', sendImgRes, WebRequest.ComfyUi.getDataBySync);
        let res = await WebRequest.ComfyUi.getDataBySync({ task_id })
        this.$message({
          message: '正在生成',
          type: 'warning'
        })
        let intervalId = setInterval(async () => {
          let res = await WebRequest.ComfyUi.getDataBySync({ task_id });
          console.log("Response:", res);  // 打印完整响应，用于调试
          // 如果停止扩展了，用获得的图片替换原图片
          if (res.data.imgUrl) {
            console.log(res.data.imgUrl, 'SDJHGLFAELSFGASLUGDSALFG');

            this.baseImage = res.data.imgUrl

          } else {
            console.log(res.data.imgUrl, 'DSJKGHFDSJKFGHDSJKFGSD');
          }
          switch (res.data.status_code) {
            case 0:
              console.log("任务运行中...");
              break;
            case 1:
              console.log("任务超时，即将停止请求");
              clearInterval(intervalId);
              that.isExtendImg = false

              break;
            case 2:
              console.log("任务完成，即将停止请求");
              clearInterval(intervalId);
              that.isExtendImg = false
              that.resLeft = 0
              that.resPaddingBottom = 0
              that.resPaddingLeft = 0
              that.resPaddingRight = 0
              that.resPaddingTop = 0
              that.resTop = 0
              that.$message({
                message: '生成成功',
                type: 'success'
              })
              break;
            case 3:
              console.log("任务异常，即将停止请求");
              clearInterval(intervalId);
              that.isExtendImg = false

              break;
            default:
              console.log(`未知状态: ${res.status_code}，即将停止请求`);
              clearInterval(intervalId);
              that.isExtendImg = false

              break;
          }
        }, 5000);


      }, 1000);

    },
    // 开始重置
    startResize(val, event) {
      if (val) {
        this.isResizing = true;
        this.startX = event.pageX;
        this.startY = event.pageY;
        this.startWidth = this.resWidth;
        this.startHeight = this.resHeight;

        if (val == 'left') {
          this.isResizing = true;
          this.startX = event.pageX;
          this.startWidth = this.resWidth / 2;
          this.changeImgType = 'left'
        } else if (val == 'right') {
          this.isResizing = true;
          this.startX = event.pageX;
          this.startWidth = this.resWidth / 2;
          this.changeImgType = 'right'
        } else if (val == 'top') {
          this.isResizing = true;
          this.startY = event.pageY;
          this.startHeight = this.resHeight / 2;
          this.changeImgType = 'top'
        } else if (val == 'bottom') {
          this.isResizing = true;
          this.startY = event.pageY;
          this.startHeight = this.resHeight / 2;
          this.changeImgType = 'bottom'
        }
      }

    },
    //鼠标离开盒子
    mouseleaveMethod(event) {
      this.isResizing = false;
      // 移开 保存上次移动的总距离
      if (this.changeImgType == 'left') {
        this.lastMoveDistanceLeft = this.resPaddingLeft
        console.log('this.resPaddingLeft', this.resPaddingLeft);
      }
      if (this.changeImgType == 'right') {
        this.lastMoveDistanceRight = this.resPaddingRight
        console.log('this.lastMoveDistanceRight', this.lastMoveDistanceRight);
      }
      if (this.changeImgType == 'top') {
        this.lastMoveDistanceTop = this.resPaddingTop
        console.log('this.lastMoveDistanceTop', this.lastMoveDistanceTop);
      }
      if (this.changeImgType == 'bottom') {
        this.lastMoveDistanceBottom = this.resPaddingBottom
        console.log('this.lastMoveDistanceBottom', this.lastMoveDistanceBottom);
      }
    },
    // 重设背景框大小
    onResize(val, event) {
      if (this.isResizing) {
        this.tempRight = 0; // 存储右侧的累积增量
        this.tempLeft = 0; // 存储左侧的累积增量
        if (this.changeImgType == 'left') {
          // 移动距离=开始位置-移动位置+上次的移动距离
          let deltaX = this.startX - event.pageX + this.lastMoveDistanceLeft;
          if (deltaX >= 0 && deltaX < this.maxExpandWidth + 1) {
            // 上次移动的距离+这次移动距离
            this.resPaddingLeft = deltaX;
            console.log(this.lastMoveDistanceLeft, 'this.lastMoveDistanceLeft', deltaX);
            this.leftVal = deltaX / 2;
          }
          console.log('初始点击位置：' + this.startX, '移动到的位置：', event.pageX, '初始宽度：', this.startWidth, "移动距离：", deltaX, 'this.lastMoveDistanceLeft', this.lastMoveDistanceLeft, this.maxExpandWidth);
        }
        if (this.changeImgType == 'right') {
          let deltaX = event.pageX - this.startX + this.lastMoveDistanceRight;
          if (deltaX >= 0 && deltaX < this.maxExpandWidth + 1) {
            this.resPaddingRight = deltaX;
            this.rightVal = deltaX / 2;
          }
          console.log('初始点击位置：' + this.startX, '移动到的位置：', event.pageX, '初始宽度：', this.startWidth, "移动距离：", deltaX);
        }
        if (this.changeImgType == 'bottom') {
          console.log(this.maxExpandHeight, 'this.maxExpandHeight');
          let deltaY = event.pageY - this.startY + this.lastMoveDistanceBottom;
          if (deltaY >= 0 && deltaY < this.maxExpandHeight + 1) {
            // if (this.heightVal > 4000) {
            //   // 如果宽度超过4000，并且保持比例，则不执行
            // } else {
            // if (this.isRock) {
            //   this.resPaddingBottom = deltaY;
            //   // this.resPaddingTop = deltaY;
            //   this.bottomVal = deltaY / 2;
            //   // 如果比例为 1 
            //   switch (this.selectedProportion) {
            //     case 1:
            //       if (deltaY > this.lastMoveDistanceBottom) {
            //         // 如果是增加
            //         if (this.resPaddingBottom + this.resPaddingTop > this.resPaddingLeft + this.resPaddingRight) {
            //           let paddVal = (this.resPaddingBottom + this.resPaddingTop) / 2;
            //           this.resPaddingBottom = this.resPaddingTop = paddVal;
            //           this.resLeft = this.resTop = 0;
            //         } else {
            //           let paddVal = (this.resPaddingLeft + this.resPaddingRight) / 2;
            //           this.resPaddingLeft = this.resPaddingRight = paddVal;
            //           this.resLeft = this.resTop = 0;
            //         }
            //       } else {
            //         //减少则是相反
            //         if (this.resPaddingBottom + this.resPaddingTop < this.resPaddingLeft + this.resPaddingRight) {
            //           let paddVal = (this.resPaddingBottom + this.resPaddingTop) / 2;
            //           this.resPaddingBottom = this.resPaddingLeft = this.resPaddingRight = this.resPaddingTop = paddVal;
            //           this.resLeft = this.resTop = 0;
            //         } else {
            //           let paddVal = (this.resPaddingLeft + this.resPaddingRight) / 2;
            //           this.resPaddingBottom = this.resPaddingLeft = this.resPaddingRight = this.resPaddingTop = paddVal;
            //           this.resLeft = this.resTop = 0;
            //         }
            //       }
            //       break;
            //     case 9 / 16:
            //       if (deltaY > this.lastMoveDistanceBottom) {
            //         // 如果是增加 上下=左右 则上下=上下*16/9
            //         if (this.resPaddingBottom + this.resPaddingTop >= this.maxExpandWidth * 2) {
            //           // 下拉，不可以超过最大拉伸范围
            //           console.log('this.resPaddingBottom + this.resPaddingTop >= 200');
            //           return
            //         } else {
            //           if (this.resPaddingBottom + this.resPaddingTop == this.resPaddingLeft + this.resPaddingRight) {
            //             let paddValHeight = (this.resPaddingBottom + this.resPaddingTop) * 16 / 9 / 2;
            //             let paddValWidth = (this.resPaddingBottom + this.resPaddingTop) * 9 / 16 / 2;
            //             this.resPaddingBottom = this.resPaddingTop = paddValHeight
            //             this.resPaddingLeft = this.resPaddingRight = paddValWidth
            //             // console.log("alsjkjdhaskjgasjkfgadsjhg231354", paddVal);
            //             console.log("alsjkjdhaskjgasjkfgadsjhg231354", paddValHeight, paddValWidth);

            //           } else {
            //             let paddValHeight = (this.resPaddingBottom + this.resPaddingTop) * 16 / 9 / 2;
            //             let paddValWidth = (this.resPaddingBottom + this.resPaddingTop) * 9 / 16 / 2;
            //             this.resPaddingBottom = this.resPaddingTop = paddValHeight
            //             this.resPaddingLeft = this.resPaddingRight = paddValWidth
            //             // this.resLeft = this.resTop = 0;
            //             console.log("alsjkjdhaskjgasjkfgadsjhg231354", paddValHeight, paddValWidth);

            //           }
            //         }
            //         console.log(this.resPaddingBottom, this.resPaddingTop, 'this.resPaddingBottom + this.resPaddingTop', this.resPaddingBottom + this.resPaddingTop >= 200);
            //       } else {
            //         //减少则是相反
            //         if (this.resPaddingBottom + this.resPaddingTop < this.resPaddingLeft + this.resPaddingRight) {
            //           let paddVal = (this.resPaddingBottom + this.resPaddingTop) / 2;
            //           this.resPaddingBottom = this.resPaddingLeft = this.resPaddingRight = this.resPaddingTop = paddVal;
            //           this.resLeft = this.resTop = 0;
            //         } else {
            //           let paddVal = (this.resPaddingLeft + this.resPaddingRight) / 2;
            //           this.resPaddingBottom = this.resPaddingLeft = this.resPaddingRight = this.resPaddingTop = paddVal;
            //           this.resLeft = this.resTop = 0;
            //         }
            //       }
            //     default:
            //       // Handle other cases if needed
            //       break;
            //   }

            //   console.log(this.selectedProportion, 'selectedProportion');
            // } else {
            this.resPaddingBottom = deltaY;
            this.bottomVal = deltaY / 2;

            // }
            // }
          }
          console.log('初始点击位置：' + this.startY, '移动到的位置：', event.pageY, '初始高度：', this.startHeight, "移动距离：", deltaY, this.resTop);
        }

        if (this.changeImgType == 'top') {
          let deltaY = this.startY - event.pageY + this.lastMoveDistanceTop;
          if (deltaY >= 0 && deltaY < this.maxExpandHeight + 1) {
            this.resPaddingTop = deltaY;
            this.topVal = deltaY / 2;  // 修正了此处的错误 

          }
          console.log('初始点击位置：' + this.startY, '移动到的位置：', event.pageY, '初始高度：', this.startHeight, "移动距离：", deltaY);
        }

        // 修正变量名并确保计算逻辑正确
        // this.resLeft = this.leftVal - this.rightVal;
        // this.resTop = this.topVal - this.bottomVal;
        console.log(this.leftVal, this.rightVal, '左右值', this.resPaddingLeft, this.resPaddingRight, this.resPaddingBottom, this.resPaddingTop, '调整值');

        // 更新的计算方式
        // 缩放比例 = （假设宽高-图片实际宽高）/（最大的宽高*2）

        this.resLeft = this.leftVal - this.rightVal;
        this.resTop = this.topVal - this.bottomVal;

        // 如果选择了固定比例，按比例调整宽高
        this.widthVal = this.scaleWidth * (this.resPaddingLeft + this.resPaddingRight) + this.imgNaturalWidth;
        this.heightVal = this.scaleHeight * (this.resPaddingTop + this.resPaddingBottom) + this.imgNaturalHeight;
        if (this.resPaddingLeft + this.resPaddingRight == 0) {
          this.widthVal = this.imgNaturalWidth
        }
        if (this.resPaddingTop + this.resPaddingBottom == 0) {
          this.heightVal = this.imgNaturalHeight
        }
        if (this.resPaddingLeft + this.resPaddingRight == this.maxExpandWidth - 2) {
          this.widthVal = this.imgNaturalWidth
        }
        if (this.resPaddingTop + this.resPaddingBottom == this.maxExpandHeight - 2) {
          this.heightVal = this.imgNaturalHeight
        }
        this.lastMoveDistanceHeight = this.heightVal
        this.lastMoveDistanceWidth = this.widthVal
        console.log(this.widthVal, '计算后的宽度值', 'this.resPaddingTop + this.resPaddingBottom', this.resPaddingTop + this.resPaddingBottom, this.maxExpandHeight, this.leftVal, this.rightVal);
      }
    },

    // 结束重设 
    stopResize() {
      this.isResizing = false;
      console.log('jkashdaskjdh');
      // 移开 保存上次移动的总距离
      if (this.changeImgType == 'left') {
        this.lastMoveDistanceLeft = this.resPaddingLeft
        console.log('this.resPaddingLeft', this.resPaddingLeft);
      }
      if (this.changeImgType == 'right') {
        this.lastMoveDistanceRight = this.resPaddingRight
        console.log('this.lastMoveDistanceRight', this.lastMoveDistanceRight);
      }
      if (this.changeImgType == 'top') {
        this.lastMoveDistanceTop = this.resPaddingTop
        console.log('this.lastMoveDistanceTop', this.lastMoveDistanceTop);
      }
      if (this.changeImgType == 'bottom') {
        this.lastMoveDistanceBottom = this.resPaddingBottom
        console.log('this.lastMoveDistanceBottom', this.lastMoveDistanceBottom);
      }
    },
    choseImg() {
      this.isChoseImg = !this.isChoseImg
      console.log('choseImg');
    },
    // 选择尺寸
    choseSize(item, index) {
      // 计算增加的宽高
      let heightRes, whidthRes
      switch (index) {
        case 0:
          this.isRock = false
          this.selectedProportion = null
          break;
        case 1:
          this.isRock = true
          // 获取宽高，并设置为1:1
          this.selectedProportion = 1

          let resWidth = (this.widthVal - this.imgNaturalWidth) / this.widthProportion / 2
          let resHeight = (this.heightVal - this.imgNaturalHeight) / this.heightProportion / 2

          if (this.widthVal > this.heightVal) {
            this.heightVal = this.widthVal
            this.resPaddingBottom = resWidth
            this.resPaddingTop = resWidth

          } else {
            this.widthVal = this.heightVal
            this.resPaddingLeft = resHeight
            this.resPaddingRight = resHeight
          }
          if (this.widthVal == 4000 || this.heightVal == 4000) {
            this.widthVal = 4000
            this.heightVal = 4000
          }
          // 因为是1:1所以计算 （宽-实际宽）/宽度比例/2两边

          console.log((this.widthVal - this.imgNaturalWidth) / this.widthProportion, (this.heightVal - this.imgNaturalHeight) / this.heightProportion);
          break;
        case 2:
          // 9:16
          this.isRock = true
          this.selectedProportion = 9 / 16
          // 按比例调整
          if (this.widthVal == this.heightVal) {
            this.heightVal = this.heightVal * 16 / 9
          } else {
            this.heightVal = this.widthVal * (16 / 9);
          }
          if (this.heightVal <= 4000) {
            heightRes = (this.heightVal - this.imgNaturalHeight) / this.maxExpandHeight
            whidthRes = (this.widthVal - this.imgNaturalWidth) / this.maxExpandWidth / 2
            this.resPaddingLeft = whidthRes
            this.resPaddingBottom = heightRes
            this.resPaddingRight = whidthRes
            this.resPaddingTop = heightRes
            console.log(heightRes, 'heightRes heightRes', whidthRes, this.widthProportion, this.maxExpandHeight, this.heightVal);
          }

          break;
        case 3:
          // 4:3
          this.isRock = true
          this.selectedProportion = 4 / 3
          console.log(this.resHeight, this.resWidth);
          if (this.widthVal == this.heightVal) {
            this.widthVal = this.widthVal * 4 / 3
          } else if (this.widthVal / this.heightVal > 4 / 3) {
            this.heightVal = this.widthVal / 4 * 3
          } else {
            this.widthVal = this.heightVal * 4 / 3
          }
          heightRes = (this.heightVal - this.imgNaturalHeight) / this.heightProportion / 2
          whidthRes = (this.widthVal - this.imgNaturalWidth) / this.widthProportion / 2
          this.resPaddingLeft = whidthRes
          this.resPaddingBottom = heightRes
          this.resPaddingRight = whidthRes
          this.resPaddingTop = heightRes
          // else {
          //   this.widthVal = this.widthVal * (4 / 3);
          // }
          break;
        case 4:
          // 3:4
          this.isRock = true
          this.selectedProportion = 3 / 4
          // let targetWidth = this.resWidth
          // let targetHeight = this.resHeight
          // console.log(this.resHeight, this.resWidth);
          // if (this.widthVal == this.heightVal) {
          //   this.heightVal = this.heightVal * 4 / 3
          // } else if (this.widthVal / this.heightVal < 3 / 4) {
          //   this.heightVal = this.heightVal / 4 * 3 
          // } else {
          //   this.heightVal = this.widthVal * 4 / 3
          // }
          if (this.widthVal == this.heightVal) {
            this.heightVal = this.heightVal * 4 / 3
          } else if (this.widthVal > this.heightVal) {
            this.heightVal = this.widthVal * (4 / 3);

          } else {
            this.widthVal = this.heightVal * (3 / 4);
          }
          heightRes = (this.heightVal - this.imgNaturalHeight) / this.heightProportion / 2
          whidthRes = (this.widthVal - this.imgNaturalWidth) / this.widthProportion / 2
          this.resPaddingLeft = whidthRes
          this.resPaddingBottom = heightRes
          this.resPaddingRight = whidthRes
          this.resPaddingTop = heightRes
          break;
        case 5:
          this.isRock = true
          console.log(this.resHeight, this.resWidth);
          // 16:9
          this.selectedProportion = 16 / 9
          if (this.widthVal == this.heightVal) {
            this.widthVal = this.widthVal * 16 / 9
          } if (this.widthVal > this.heightVal) {
            this.widthVal = this.heightVal * 16 / 9
          } else {
            this.widthVal = this.heightVal * (16 / 9);
          }
          heightRes = (this.heightVal - this.imgNaturalHeight) / this.heightProportion / 2
          whidthRes = (this.widthVal - this.imgNaturalWidth) / this.widthProportion / 2
          this.resPaddingLeft = whidthRes
          this.resPaddingBottom = heightRes
          this.resPaddingRight = whidthRes
          this.resPaddingTop = heightRes
          break;
        default:
      }
      // 最大拉伸不能超过限制尺寸
      if (this.resPaddingLeft > this.maxExpandWidth) {
        this.resPaddingLeft = this.maxExpandWidth
      }
      if (this.resPaddingBottom > this.maxExpandHeight) {
        this.resPaddingBottom = this.maxExpandHeight
      }
      if (this.resPaddingRight > this.maxExpandWidth) {
        this.resPaddingRight = this.maxExpandWidth
      }
      if (this.resPaddingTop > this.maxExpandHeight) {
        this.resPaddingTop = this.maxExpandHeight
      }

      // 点击选择 非自由尺寸后将盒子设置为中心点
      if (this.isRock) {
        this.resLeft = 0
        this.resTop = 0
      }
      console.log(item, index);
      this.sizeTypeId = index
    },
    /** 重置 */
    reset() {
    },
    /** 初始化 */
    init() {
    },
    /** 重置比例 */
    resetZoom(e) {
      this.loading = true;
      let img = new Image();
      img.src = this.src;
      this.imagesList[0] = this.src;
      img.onload = (e2) => {
        // 清除之前可能存在的样式或尺寸信息
        this.$refs.img.style.width = 'none';
        this.$refs.img.style.height = 'none';
        console.log(e2, 'e2e2e2e2');
        let w = e2.currentTarget.width;
        let h = e2.currentTarget.height;
        // 计算纵横比
        let width = this.width;
        let height = parseInt(h * (this.width / w));
        if (w >= h) {
          if (height > this.height) {
            width = parseInt(w * (this.height / h));
            height = this.height;
          }
          this.zoom = w / width;
        } else {
          width = parseInt(w * (this.height / h));
          height = this.height;
          if (width > this.width) {
            width = this.width;
            height = parseInt(h * (this.width / w));
          }
          this.zoom = h / height;
        }
        this.imgWidth = width;
        this.imgHeight = height;
        this.loading = false;
        this.showFloatBtn = true;
        this.imgNaturalHeight = this.$refs.img.naturalHeight
        this.imgNaturalWidth = this.$refs.img.naturalWidth
        this.widthProportion = (4000 - this.imgNaturalWidth) / 200
        this.heightProportion = (4000 - this.imgNaturalHeight) / 200
        this.widthVal = this.$refs.img.naturalWidth
        this.heightVal = this.$refs.img.naturalHeight
        this.maxExpandWidth = (436 - this.resWidth) / 2
        this.maxExpandHeight = (436 - this.resHeight) / 2
        this.scaleHeight = (4000 - this.imgNaturalHeight) / (this.maxExpandHeight * 2);
        this.scaleWidth = (4000 - this.imgNaturalWidth) / (this.maxExpandWidth * 2);
        console.log(height, 'this.maxExpandHeight = (436 - height) / 2', this.imgWidth, this.resWidth, this.resHeight);
        console.log(this.$refs.img.naturalWidth);
        console.log(this.imgWidth, 'this.imgWidththis.imgWidth', this.imgNaturalHeight, this.imgNaturalWidth);
        // 更新背景盒子大小
        // 更新背景盒子大小
        this.$nextTick(() => {
          this.updateBoxSize();
        });
      };
    },
    updateBoxSize() {
      this.$nextTick(() => {
        const img = this.$refs.img;
        const box = this.$refs.box;
        if (img && box) {
          // 要为用户预留拉伸空间 图片大于240就没有拉伸空间了 盒子大小总共450
          if (img.width > img.height) {
            if (img.width > 240) {
              // 当宽大于高，并且大于240时 宽等于240 高=宽*实际高/实际宽
              this.imgWidth = 240
              this.imgHeight = this.imgWidth * this.imgNaturalHeight / this.imgNaturalWidth
            }
          }
          if (img.width < img.height) {
            if (img.height > 240) {
              this.imgHeight = 240
              this.imgWidth = this.imgHeight * this.imgNaturalWidth / this.imgNaturalHeight
            }
          }
          if (img.width == img.height) {
            if (img.height > 240) {
              this.imgHeight = this.imgWidth = 240
            }
          }
          console.log(this.imgHeight, this.imgWidth, 'this.imgWidththis.imgWidth');
          box.style.width = this.imgWidth + 16 + 'px';
          box.style.height = this.imgHeight + 16 + 'px';
          this.resWidth = this.imgWidth + 16;
          this.resHeight = this.imgHeight + 16;
        }
      });
    },
    /** 重置所有设置 */
    resetAll() {
      // 重新读取图片和比例
      this.resetZoom()
    },
    /** 变更图片 */
    onChangeImage() {
      this.resetAll()
    },


    onSubmit(e) {
      if (this.computeing) return

      this.computeing = true;
      WebRequest.PreConsumerPoint({
        serviceType: 5,
        callback: (res) => {
          if (res.data.errCode == 10000) {
            var coseId = res.data.data.id;
            var extendValue = JSON.stringify({
              operationId: '5',
              operationName: '高清还原',
              originalImage: this.baseImage,
              resultImage: ''
            })
            // 提交需要高清还原的图片
            WebRequest.Upscaling({
              costId: coseId,
              imgUrl: this.src,
              extendValue,
              sourceImageDepotId: '',
              callback: (e) => {
                if (e.data.errCode == 10000) {
                  var resultImgUrl = e.data.data.imgUrl
                  this.imagesList[1] = e.data.data.imgUrl
                  this.imagesIndex = 1
                  this.$message({
                    message: '扣费请求失败',
                    type: 'success'
                  })
                } else {
                  this.$message({
                    message: '高清还原失败',
                    type: 'error'
                  })
                }
                this.computeing = false
              },
              error: (e) => {
                this.$message({
                  message: '高清还原请求失败',
                  type: 'error'
                })
                this.computeing = false
                console.log('高清还原接口请求异常', e)
              }
            })
          } else {
            this.$message({
              message: '扣费失败',
              type: 'error'
            })
            this.computeing = false
            console.log('扣费失败', res)
          }
        },
        error: (e) => {
          this.$message({
            message: '扣费请求失败',
            type: 'error'
          })
          this.computeing = false
          console.log('扣费接口请求异常', res)
        }
      })
    },

    /** 输出 */
    output() {
      this.$emit('comfirm', { url: this.imagesList[1] || null })
    },

  }
}
</script>

<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.doodle-view-content {
  margin-left: 0;
  display: flex;

  .doodle-view-left {
    text-align: left;
    margin-top: 10px;
    background-color: white;
    width: 23%;
    padding-right: 4px;

    .doodle-left-title {
      font-weight: 600;
      margin-bottom: 20px;
      margin-top: 20px;
      font-size: 16px;
    }

    .size-type {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      padding-top: 20px;

      >div {
        width: 25%;
        margin-right: 20rpx;
        border: 1px solid;
        text-align: center;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }

    .doodle-slider {
      .slider-demo-block {
        display: flex;
        flex-direction: column;

        div {
          display: flex;
        }
      }
    }
  }
}

.doodle-view-center {
  flex: 1;
}

.tip_text {
  padding: 10px;
  color: #99999F;
}

.top-frame,
.bottom-frame {
  position: absolute;
  height: 16px;
  /* 高度为4px */
  left: 0;
  right: 0;
  width: auto;
  /* 宽度自动延伸至盒子宽度 */
}

.top-frame {
  top: -4px;
  background: red;
  width: 100px;
  margin: auto;

}

.bottom-frame {
  bottom: -4px;
  background: red;
  width: 100px;
  margin: auto;
}

.left-frame,
.right-frame {
  position: absolute;
  width: 16px;
  /* 宽度为4px */
  top: 0;
  bottom: 0;
  height: auto;
  /* 高度自动延伸至盒子高度 */
}

.left-frame {
  left: -4px;
  background: red;
  margin: auto;
  height: 100px;
}

.right-frame {
  right: -4px;
  background: red;
  margin: auto;
  height: 100px;
}

.doodle-slider .slider-demo-block .el-slider {
  width: 68%;
}

.doodle-img,
.doodle-img-bg {
  // width: 25%;
  // height: auto;
}

.doodle-img-bg {
  position: absolute;
  // left: 50%;
  // top: 50%;
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #A6BBC3;
  z-index: 0;
  transition: height 0.3s ease;
}


.el-input-number {
  margin-left: 4px;
}

.active {
  background-color: #02A7F0;
  color: white;
}

.imgActive {
  border: 1px solid;
}
</style>